﻿@model RouteOptimization.ModelObjects.Vertex

@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Detail</h2>

@using (Html.BeginForm("Save","Vertices")) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Vertex</legend>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">
            @Html.LabelFor(model => model.CityId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CityId)
            @Html.ValidationMessageFor(model => model.CityId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PaymentForChangeRoute)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PaymentForChangeRoute)
            @Html.ValidationMessageFor(model => model.PaymentForChangeRoute)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NumberInRoute)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NumberInRoute)
            @Html.ValidationMessageFor(model => model.NumberInRoute)
        </div>
        @Html.EditorFor(model=>model.Point)
        
        <div id="map-canvas" class="half-height" style="height: 200px"></div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<style>
    .labels {
   color: red;
   background-color: white;
   font-family: "Lucida Grande", "Arial", sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   width: 60px;     
   border: 2px solid black;
   white-space: nowrap;
   z-index: 500
 }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(53.711, 23.859),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
            var count = 0;
            google.maps.event.addListener(map, "rightclick", function(event) {
                $("#Point_X").val(event.latLng.lat());
                $("#Point_Y").val(event.latLng.lng());
                count++;

                var marker = new google.maps.Marker({
                    position: event.latLng,
                    map: map,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    title: count.toString(),
                    labelContent: "fwefwf",
                    labelAnchor: new google.maps.Point(22, 0),
                    labelClass: "labels", // the CSS class for the label
                    labelStyle: { opacity: 0.75 }
                });
                // populate yor box/field with lat, lng
                //alert("Lat=" + lat + "; Lng=" + lng);
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
